<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .list{
            width: 300px;
            height: 300px;
            background-color: #ccc;
        }
        .list li{
            border:1px solid black;
        }
    </style>
</head>
<body>
<div class = "box"></div>
<ul class = "list">
    <li>1wqs</li>
    <li>2速度</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<script>
    /*
    * 事件监听：
    *
    * 事件监听的取消：
    *   removeEventListener()
    *   它与addEventListener()参数是一致的，addEventListener()参数是怎么写的，removeEventListener()参数就怎么写
    *   1.事件类型
    *   2.回调函数
    *   3.捕获状态
    *
    */
    let box = document.querySelector(".box")

    //添加点击事件
    //box.addEventListener("click",function (e){
    //    console.log("box")
    //})

    //移除点击事件
    //box.removeEventListener("click",function (e){
    //    console.log("box")
    //})

    //上面这样写并不能移除事件，因为函数是对象，是引用关系，这两个回调函数不一致，所以没办法移除，应该这样
    function clickMethod(){
        console.log("box")
    }
    //添加点击事件
    box.addEventListener("click",clickMethod)

    //移除点击事件
    box.removeEventListener("click",clickMethod)

    //这样写之后，回调函数才是同一个函数

    //注意事项：多个监听事件中如果引用的回调函数是同一个，那么就只生效一个监听事件，需要移除的点击事件也只有一个
    function dian(){
        console.log("一样的点击事件")
    }

    box.addEventListener("click",dian)
    box.addEventListener("click",dian) //这个监听事件和上面的一行引用的是同一个回调函数，两者只生效一个


    /*
    * 事件代理：是一种设计模式
    *
    * */

    //假如我们需要给ul里面的每个li添加一个点击事件，我们以前会这样写
    //let liList = document.querySelectorAll(".list li")

    //liList.forEach(li => {
    //    li.addEventListener("click",function () {
    //       console.log(this.innerHTML)
    //    })
    //})
    //这时候如果我们中途需要修改事件，就需要再遍历所有的li依次解除，再重新绑定，非常麻烦，而且后面如果新添加的li也是没有相关事件的

    //事件代理的写法：用到事件对象e的target属性 事件的目标
    let list = document.querySelector(".list")

    function fn(e){
        console.log(e)
        console.log(e.target) //打印出被点击的目标对象
        let target = e.target //将目标对象交给变量target存储

        //判断当前的这个target只有是li并且li里面是数字的时候才进行操作 用tagName来判断标签名是什么标签
        if(target.tagName.toLowerCase() === "li"){
            //再写一层判断
            if(/^\d+$/.test(target.innerHTML)){
                console.log(target.innerHTML)
            }
        }
    }

    list.addEventListener("click",fn) //监听的是ul，因为所有的li都是在同一个ul里面

    //通过事件代理思想写出来的事件，即使后续添加新的li也能有相关事件，因为我们监听的是ul，从头到尾就不是监听li
    let li = document.createElement("li")
    li.innerHTML = "123"
    list.appendChild(li)

</script>
</body>
</html>